<%-- 
    Document   : lista
    Created on : 16/02/2011, 04:23:48 PM
    Author     : WILLIAM
--%>

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="t" uri="http://myfaces.apache.org/tomahawk"%>
<%@taglib prefix="r" uri="http://richfaces.ajax4jsf.org/rich" %>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<script language="javascript" src="../js/funciones.js"></script>
<script language="javascript" src="../js/scripts.js"></script>
<link href="/sistemas/Estilos/estilosEsymons.css" rel="stylesheet" type="text/css" />

<f:view>
<h:form>
    <h:panelGrid columns="2" >
        <h:selectOneMenu value="#{galeriaController.vista}" styleClass="fondo012" onchange="submit();" >
            <f:selectItem itemLabel="Seleccionar vista" itemValue="0" />
            <f:selectItem itemLabel="Vista mosaico" itemValue="1" />
            <f:selectItem itemLabel="Vista individual" itemValue="2" />
        </h:selectOneMenu>
    </h:panelGrid>
    <%-- VISTA MOSAICO --%>
    <h:panelGroup rendered="#{galeriaController.vista==1}">
    <r:panel>
        <f:facet name="header">
            <h:outputLabel value="Galeria Fotográfica" styleClass="texto22" />
        </f:facet>
        <center>
       <r:dataGrid value="#{galeriaController.listaImagenes}" var="fotos"
                    rowKeyVar="fotin" width="95%" columns="4" elements="12" >
        <f:facet name="header">
            <r:datascroller></r:datascroller>
        </f:facet>
        <r:panel bodyClass="pbody">
            <f:facet name="header">
                <h:outputLabel value="#{fotos.galCategoria} - #{fotos.galNombre}" styleClass="texto22" />
            </f:facet>
            <h:panelGrid columns="1">
            <center>
            <a4j:mediaOutput value="#{fotin}" element="img" session="true" align="middle" title="#{fotos.galTitulo}"
            createContent="#{galeriaController.drawImagenListaFotos}" mimeType="image/jpg" styleClass="galeriaChica" />
            </center>
            </h:panelGrid>
        </r:panel>
        <f:facet name="footer">
            <r:datascroller></r:datascroller>
        </f:facet>
       </r:dataGrid></center>
</r:panel>
</h:panelGroup>
 <%-- VISTA INDIVIDUAL --%>
 <h:panelGroup rendered="#{galeriaController.vista==2}">
    <r:panel>
        <f:facet name="header"><h:outputLabel value="Galeria" />
        </f:facet>
        <center>
       <r:dataGrid value="#{galeriaController.listaImagenes}" var="fotos"
                    rowKeyVar="fotin" width="65%" columns="1" elements="1" >
        <f:facet name="header">
            <r:datascroller></r:datascroller>
        </f:facet>
        <r:panel bodyClass="pbody">
            <f:facet name="header">
                <h:outputLabel value="#{fotos.galCategoria} - #{fotos.galNombre}" styleClass="texto22" />
            </f:facet>
            <h:panelGrid columns="1">
            <center>
            <a4j:mediaOutput value="#{fotin}" element="img" session="true" align="middle" title="#{fotos.galTitulo}"
            createContent="#{galeriaController.drawImagenListaFotos}" mimeType="image/jpg"  />
            <r:spacer height="5"></r:spacer>
            <h:outputLabel value="Foto tomada el #{fotos.fechaFoto}" styleClass="texto22" />
            <h:outputLabel value="Comentario: #{fotos.galComentario}" styleClass="texto22" />
            </center>
            </h:panelGrid>
        </r:panel>
        <f:facet name="footer">
            <r:datascroller></r:datascroller>
        </f:facet>
       </r:dataGrid></center>
</r:panel>
</h:panelGroup>
</h:form>
</f:view>
